Selektorem moze byc dowolnym elementem jezyka HTML, dla ktorego chcemy zdefiniowac parametry formatowania. W zaleznosci od sposobu odwolywania sie do definicji reguly wyrozniamy nastepujace rodzaje selektorow
Selektory elementow to najczesciej spotykane selektory o skladni selektor{Wlasciwosc:cecha;}
Selektor elementu to podstawowy typ selektora np.: p,div,td(color:blue)
Selektor uniwersalny (inaczej ogolny) to selektor pasujacy do wszystkich znacznikow. Ten selektor jest oznaczany *(gwiazdka). Np.: *{font-family:tahoma;}
Przy uzyciu selektora potomka mozemy formatowac elementy wpisane w innych, lezacy wyzej w hierarchi strony element, Np. Jezeli w elemencie <h2>, znajduje sie element <i> to jest on potomkiem elementu <h2>, i formatujemy go w/g wzoru h2 i {wlasciwosci:cecha;}
Do GorySelektor dziecka sluzy do formatowania elementow znajdujacych sie o jeden rzad nizej w hierarchii drzewa dokumentu. Ma on postac rodzic > dziecko(wlasciowosc:cecha;}
Do GorySprawdzanie Dzialanie Selektora dziecka i selektor potomka
Do Gory
Selektor braci formatuje 2 element na tym samym poziomie hierarchii, w/g wzoru: brat1+ brat2(wlasciwosc:cecha;)
Przyklad na braci
Selektory specjalne, jedne z najczesciej uzywanych, pozwalaja na nadanie indywidualnych cech, takim samym elementom na stronie. Mamy dwa rodzaje takich selektoro: selektor klasy i slektor identyfikatora.W dobrej praktyce selektory klas moga byc urzywane wielokrotni, natomiast selektor identyfikatora powinien byc unkatowy, -niepowtarzalny
Do Gory
Selektor klasy deklarujemy w/g wzoru: selektor.nazwa_klasy{cecha:wartoscl} np:. p.t1{color:yellow}
Do selektora klasy odwolujemy sie w kodzie HTML nastepujaco:
<p class="nazwaclasy">
Mozna tworzyc klasy uniwersalne, ktore beda dzuakaky na wielu elementach. Tworzy je, bez podawania nazwy selektora, od kropki n.:
.klasa2c{width:700px;}
Selektor identyfikatora - deklarujemy w/g wzoru
selektor#nazwa_identyfikatora{wlasciwosci:wartosci}
<h3#ng3{font-size: 1cm}
odwolanie do identyfikatora selektora id="nazwa"
Pseudoklasy wprowadzaja styl zaleznie od polozenia kursora myszy lub dzialania(np.: wcisniecia l_kl myszy). Najczesciej stosowane do formatowania linkww, moga byc uzyte do wiekszosci elementww.
Pseudoklasy deklarujemy od dwukropka(:) i mamy 4 mozliwosci:
Stosujac pseudoklasy, powinnismy uzyc wszystkich, i w podanej wyzej kolejnosci. Pseudoklasa hover moze byc uzyta do formatowania elementww innych niz linki. Ten akapot posiada klase "sil" z pseudoklasa "hover".
Pseudoklasa :focus nadaje atrybuty formatowania odsylaczowi(wczesniej wybranemu)lub polu formularza na ktwrym zostal ustawiony kursor. Konstrukcja selektor:focus{cecha:wartosc;}
Do Gory
Selektory pseldoelementow formatuja. Pierwsza litere akapitu albo pierwszy wiersz akapitu. Ich deklaracja to odpowiednio:
- selektor:first-letter{cechy:wartosci;}
- selektor:first-line{cechy:wartosc;}
Daniel Zygmunt 2c